<template>
	<view class="pb-128">

		<uni-nav-bar @clickLeft="$tab.back()" :fixed="true" left-icon="left" backgroundColor="transparent"
			:statusBar="true" :border="false" />


		<view class="box-1 flex items-center justify-around" :style="{
			background:`url(${globalConfig.appConfig.loginBg})`,
			backgroundSize:'100% 100%'
		}">
			<image :src="globalConfig.appConfig.loginIcon" class="image-1" mode="widthFix"></image>
		</view>

		<view class="content">
			<view class="px-32">
				<view class="box-2">
					注册
				</view>
			</view>
			<view class="c px-32 mt-48">
				<u--form labelPosition="left" :model="form" :value="form" ref="form" label-width="140rpx">
					<u-form-item label="手机号" prop="username" borderBottom>
						<u--input v-model="form.username" border="none" placeholder="请输入手机号"></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="code" borderBottom>
						<u--input v-model="form.code" border="none" placeholder="请填写验证码"></u--input>
						<u-button slot="right" @tap="getCode" :text="tips" size="mini"></u-button>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom>
						<u--input v-model="form.password" type="password" border="none" placeholder="请输入密码"></u--input>
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmPassword" borderBottom>
						<u--input v-model="form.confirmPassword" type="password" border="none" placeholder="请再次确认密码">
						</u--input>
					</u-form-item>
					<u-form-item label="支付密码" prop="payPassword" borderBottom>
						<u--input  v-model="form.payPassword" type="password" border="none" placeholder="请输入支付密码"></u--input>
					</u-form-item>
					<u-form-item label="邀请码" prop="inviteCode" borderBottom>
						<u--input v-model="form.inviteCode" border="none" placeholder="请输入邀请码(可不填)"></u--input>
					</u-form-item>
				</u--form>

				<view class="loginBtn text-32 text-center text-FFF" @click="submit">
					注册
				</view>
			</view>
		</view>


		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false">
		</u-code>
	</view>
</template>

<script>
	import {
		sendsms,
		revisepassword,
		forgetPassword
	} from "@/api/login.js"
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				form: {
					username: "",
					password: "",
					confirmPassword: "",
					uuid: "",
					inviteCode: "",
					nickName: "",
					code: "",
					payPassword: ""
				},
				tips: "获取验证码",
				correct: "",
				rules: {
					username: {
						required: true,
						type: 'string',
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					code: {
						required: true,
						type: 'string',
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '新密码不能为空'
					},
					confirmPassword: {
						required: true,
						message: '确认密码不能为空'
					},
					nickName: {
						required: true,
						type: 'string',
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},
					payPassword: {
						required: true,
						message: '请输入支付密码'
					},
				},
			};
		},
		onLoad() {

		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				var that = this;
				if (this.form.username.trim() === '') {
					this.$modal.msgError("请输入手机号")
					return false
				}
				if (uni.$u.test.mobile(this.form.username.trim()) === false) {
					this.$modal.msgError("请输入正确的手机号")
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendsms(that.form.username).then(res => {
						that.form.uuid = res.data;
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
						that.$modal.closeLoading();
					}).catch(() => {
						that.$modal.closeLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				var that = this;
				this.$refs.form.validate().then(res => {
					if (that.form.password != that.form.confirmPassword) {
						that.$modal.msgError("两次输入的密码不一致")
					} else {
						this.$Api.user.registerUser(this.form).then(res => {
							console.log('注册', res)
							uni.reLaunch({
								url:"/pages/login"
							})
						})
					}
				})
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.box-1 {
		width: 750rpx;
		height: 486rpx;

		.image-1 {
			width: 208rpx;
		}
	}

	.box-2 {
		font-size: 56rpx;
		font-weight: bold;
		background-image: linear-gradient(to bottom,
				#ff561d,
				#ff0064);
		/* 从左到右的红色至黄色线性渐变 */
		background-clip: text;
		-webkit-background-clip: text;
		/* Safari/Chrome特定样式，将渐变应用于文字区域 */
		-webkit-text-fill-color: transparent;
		/* Safari/Chrome特定样式，透明化文字内容 */
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}


	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		border-radius: 278rpx;
		line-height: 96rpx;
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		margin: 108rpx auto 48rpx;
	}


	.content {
		padding-top: 90rpx;
		border-radius: 64rpx 64rpx 0 0;
		position: relative;
		top: -64rpx;
		z-index: 9;
		width: 100%;
		background-color: #FFF;
	}
	
	/deep/ .u-button--info{
		border: none !important;
		color: #FFB200;
	}
	
	/deep/ .u-form-item__body{
		padding: 32rpx 0 !important;
	}
</style>